<template>
  <span 
    :class="[
      'status-tag',
      statusClasses,
      sizeClasses,
      customClass
    ]"
  >
    <!-- 图标 -->
    <i 
      v-if="icon" 
      :class="[
        icon,
        { 'mr-1': $slots.default || text }
      ]"
    ></i>
    
    <!-- 文本内容 -->
    <slot>
      {{ text }}
    </slot>
  </span>
</template>

<script setup>
import { computed, defineProps } from 'vue'

// 定义属性
const props = defineProps({
  // 状态类型
  type: {
    type: String,
    default: 'gray',
    validator: (value) => {
      return ['success', 'warning', 'error', 'info', 'gray', 'primary'].includes(value)
    }
  },
  // 显示文本
  text: {
    type: String,
    default: ''
  },
  // 图标类名
  icon: {
    type: String,
    default: ''
  },
  // 尺寸
  size: {
    type: String,
    default: 'md',
    validator: (value) => {
      return ['sm', 'md', 'lg'].includes(value)
    }
  },
  // 自定义类名
  customClass: {
    type: String,
    default: ''
  }
})

// 状态样式映射
const statusClasses = computed(() => {
  const classMap = {
    success: 'status-success',
    warning: 'status-warning', 
    error: 'status-error',
    info: 'status-info',
    gray: 'status-gray',
    primary: 'bg-blue-100 text-blue-800'
  }
  return classMap[props.type] || classMap.gray
})

// 尺寸样式映射
const sizeClasses = computed(() => {
  const sizeMap = {
    sm: 'px-2 py-0.5 text-xs',
    md: 'px-2.5 py-0.5 text-xs',
    lg: 'px-3 py-1 text-sm'
  }
  return sizeMap[props.size] || sizeMap.md
})
</script>

<style scoped>
/* 组件特定样式 */
</style>